<template>
  <div class="body">
    <div class="top">
      <div>
        <img src="../../assets/img/tis_icon_cg.png" alt="" />
        <h1>任务提交完成，待审核！</h1>
        <h2>{{ time }}</h2>
        <ul class="btn">
          <li @click="$router.push('/index')">下一个任务</li>
          <li
            @click="
              $router.push({
                path: '/share',
                query: { task_id: $route.query.task_id, user_id: user_id },
              })
            "
          >
            分享获取福利
          </li>
        </ul>
      </div>
    </div>

    <h1 class="diantitle">
      <img src="../../assets/img/rwxx_img_diandian.png" alt="" />
      <span>会员福利</span>
      <img src="../../assets/img/rwxx_img_diandian.png" alt="" />
    </h1>

    <dl @click="$router.push('/member')">
      <dd>
        <img src="../../assets/img/shili.png" alt="" />
        <div>
          <h1>下载注册抖赚APP</h1>
          <h2>轻松三步 拿佣金</h2>
        </div>
      </dd>
      <dt>
        <p>￥10.00</p>
        <h3>加入会员</h3>
      </dt>
    </dl>
  </div>
</template>

<script>
export default {
  name: 'success',
  data() {
    return {
      time: '',
      user_id: '',
    };
  },
  mounted() {
    let newtime = new Date();
    //获取数据返回时间的具体数值
    let n = newtime.getFullYear();
    let y = newtime.getMonth() + 1;
    let r = newtime.getDate();
    let h =
      newtime.getHours() > 9 ? newtime.getHours() : '0' + newtime.getHours();
    let m =
      newtime.getMinutes() > 9
        ? newtime.getMinutes()
        : '0' + newtime.getMinutes();
    let s =
      newtime.getSeconds() > 9
        ? newtime.getSeconds()
        : '0' + newtime.getSeconds();
    let timer = n + '年' + y + '月' + r + '日 ' + h + ':' + m + ':' + s;
    this.time = timer;

    let userinfo = localStorage.getItem('userinfo');
    if (userinfo) {
      this.user_id = JSON.parse(userinfo).user_id;
    }
  },
};
</script>

<style scoped lang="less">
@import '../../style/default';

.body {
  background: #f9f9f9;
  overflow: auto;
}

.top {
  height: 6rem;
  background: url('../../assets/img/rwxx_img_bj.png') center -1.8rem no-repeat;
  background-size: 7.5rem auto;
  overflow: hidden;

  div {
    width: 6.7rem;
    height: 5rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.06rem;
    margin: 1rem auto 0;
    overflow: hidden;

    img {
      width: 1rem;
      height: 1rem;
      display: block;
      margin: 0.8rem auto 0.4rem;
    }

    h1 {
      font-size: @font36;
      font-weight: bold;
      color: @color5;
      text-align: center;
    }

    h2 {
      font-size: @font24;
      text-align: center;
      margin: 0.1rem auto 0.39rem;
      color: @color2;
      font-weight: normal;
    }

    .btn {
      height: 1rem;
      width: 6rem;
      margin: 0 auto;

      li {
        font-size: @font32;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        width: 50%;
        padding: 0.24rem 0;
        float: left;
      }

      li:nth-child(1) {
        width: 2.8rem;
        background: url('../../assets/img/rwxx_img_an_left.png') center center
          no-repeat;
        background-size: 2.8rem auto;
      }

      li:nth-child(2) {
        background: url('../../assets/img/rwxx_img_an_right.png') center center
          no-repeat;
        background-size: 3.2rem auto;
        width: 3.2rem;
        margin-left: -0.05rem;
      }
    }
  }
}

.diantitle {
  height: 0.6rem;
  text-align: center;
  margin: 0.05rem auto 0.15rem;

  span {
    font-size: 0.3rem;
    font-weight: bold;
    color: rgba(42, 43, 63, 1);
  }

  img {
    width: 0.13rem;
    margin: 0 0.12rem;
  }
}

dl {
  width: 7.2rem;
  height: 2.1rem;
  background: url('../../assets/img/rwxx_img_cg_bj.png') center center no-repeat;
  background-size: 7.2rem auto;
  margin: 0 auto;

  dd {
    float: left;
    width: 4.9rem;
    height: 2.1rem;

    img {
      float: left;
      width: 0.95rem;
      margin: 0.6rem 0.2rem 0 0.57rem;
    }

    div {
      h1 {
        font-size: 0.3rem;
        font-weight: bold;
        color: rgba(42, 43, 63, 1);
        margin-top: 0.65rem;
      }

      h2 {
        font-size: 0.24rem;
        font-weight: 400;
        color: rgba(170, 170, 170, 1);
        margin-top: 0.08rem;
      }
    }
  }

  dt {
    float: left;
    width: 2.3rem;
    height: 2.1rem;

    p {
      font-size: 0.44rem;
      font-weight: 500;
      color: rgba(255, 70, 45, 1);
      margin: 0.55rem 0 0.07rem 0.16rem;
    }

    h3 {
      border: 0.01rem dashed #ff462d;
      border-radius: 0.22rem;
      font-size: 0.25rem;
      padding: 0.04rem 0;
      font-weight: normal;
      width: 1.5rem;
      text-align: center;
      color: #ff462d;
      margin-left: 0.24rem;
    }
  }
}
</style>
